<template>
  <div>
    <el-dialog
      title="编辑员工"
      :visible.sync="dialogshow"
      :before-close="dialogClose"
      style="display: none"
      :fullscreen="fullscreen"
      width="90%"
      top="10vh"
    >
      <dialog-tools
        v-bind:back="true"
        v-bind:next="true"
        v-bind:goback="true"
        v-bind:prev="true"
        v-bind:screen="true"
        @clickfullscreen="clickfullscreen"
      >
      </dialog-tools>
      <div>
        <!-- <el-form-item label="订单号" prop="field108">
            <el-input
              v-model="formData.address"
              auto-complete="off"
              @click.native="handleButtons(33)"
            ></el-input>
          </el-form-item>
          <el-form-item label="款号" prop="field108">
            <el-input
              v-model="formData.address"
              auto-complete="off"
            ></el-input>
          </el-form-item>

      <el-form-item label="报价项目" prop="field108">    
  <el-select v-model="bjxm" placeholder="请选择" style="width:100%">
    <el-option label="设计费" value="1"></el-option>
    <el-option label="取版费" value="2"></el-option>
    <el-option label="证书费" value="3"></el-option>
    <el-option label="其它" value="4"></el-option>
  </el-select>
</el-form-item>

          <el-form-item label="报价金额" prop="field108">
            <el-input
              v-model="formData.customercode"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          
             <el-form-item label="备注">
            <el-input type="textarea"
              v-model="formData.customercode"
              auto-complete="off"
            ></el-input>
          </el-form-item>        -->
        <el-form
          ref="elForm"
          :model="formData"
          
          size="medium"
          label-width="100px"
        >
            <el-tabs class="tabs-table user-tabs" type="border-card">
        <el-tab-pane label="基本信息">

        <el-row class="item-w270">
          <el-col :span="20"><el-row>
          <!-- <el-form-item label="头像">
            <img
              src="./statics/images/head.png"
              width="50"
              height="50"
              alt=""
            />
          </el-form-item> -->
          <el-form-item label="姓名" prop="name" :required="true">
            
            <el-input
              v-model="formData.name"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
          <el-form-item label="个人电话" prop="tel" :required="true">
            <el-input
              v-model="formData.tel"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>

          <el-form-item label="登陆密码" prop="password" :required="true">
            <el-input
              v-model="formData.tel"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
        <!-- </el-row>
          <el-row class="item-w270"> -->
          <el-form-item label="工号" :required="true">
            <el-input
              v-model="formData.gonghao"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="卡号" >
            <el-input
              v-model="formData.kahao"
              auto-complete="off"
            ></el-input>
          </el-form-item>

        </el-row>

          <el-row class="item-w270">
            <el-form-item label="业务手机" prop="work_tel" >
            <el-input
              v-model="formData.work_tel"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务微信" prop="weixin" >
            <el-input
              v-model="formData.weixin"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务邮箱" prop="email" >
            <el-input
              v-model="formData.email"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务QQ" prop="qq" >
            <el-input
              v-model="formData.qq"
              auto-complete="off"
              class="clientName"
            ></el-input>
          </el-form-item>
        </el-row>
          <el-row class="item-w270">


          <el-form-item label="是否在职">
 <el-checkbox label="是" v-model="formData.is_zaizhi"></el-checkbox>
          </el-form-item>
          <el-form-item label="系统使用">
 <el-radio-group v-model="formData.is_disable">
    <el-radio :label="0">正常</el-radio>
    <el-radio :label="1">禁用</el-radio>
 </el-radio-group>
  </el-form-item>

          <el-form-item label="性别">
             <el-select v-model="formData.six" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
                <el-option label="未知" value="3"></el-option>
             </el-select>
          </el-form-item>
                   <el-form-item label="出生日期">
<el-date-picker
      v-model="formData.chrq"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
         </el-form-item>
        </el-row>
          <el-row class="item-w270">



          <el-form-item label="部门">
                <el-select v-model="formData.bumen" placeholder="部门">
      <el-option label="销售部" value="1"></el-option>
      <el-option label="财务部" value="2"></el-option>
            <el-option label="设计部" value="3"></el-option>
      <el-option label="生产部" value="4"></el-option>
            <el-option label="采购部" value="5"></el-option>
      <el-option label="人事行政部" value="6"></el-option>
    </el-select>
            
          </el-form-item>

          <el-form-item label="岗位" >
                <el-select v-model="formData.ganwei" multiple placeholder="岗位">
      <el-option label="销售" value="1"></el-option>
      <el-option label="采购" value="2"></el-option>
            <el-option label="财务" value="3"></el-option>
      <el-option label="仓管" value="4"></el-option>
            <el-option label="质检" value="5"></el-option>
      <el-option label="人事" value="6"></el-option>
      <el-option label="老板" value="6"></el-option>
      <el-option label="普通员工" value="6"></el-option>
    </el-select>
    </el-form-item>
    
          <el-form-item label="角色">

<el-select v-model="formData.role" multiple placeholder="角色">
      <el-option label="超级管理员" value="1"></el-option>
      <el-option label="普通员工" value="2"></el-option>
      <el-option label="离职员工" value="3"></el-option>
      <el-option label="仓库品检" value="4"></el-option>
      <el-option label="人事" value="5"></el-option>
    </el-select>
            
          </el-form-item>


          <!-- </el-row>
        
          <el-row class="item-w270"> -->

          <el-form-item label="班组">
            <el-input v-model="formData.bangzu" auto-complete="off"></el-input>
          </el-form-item>

          <el-form-item label="辅导人">
            <el-input v-model="formData.bangzu" auto-complete="off"></el-input>
          </el-form-item>
          </el-row>
        
          <el-row class="item-w270">
 
                <el-form-item label="创建人">
            <el-input v-model="formData.cjr" auto-complete="off"></el-input>
          </el-form-item>      

          <el-form-item label="创建时间">
            <el-input v-model="formData.create_time" auto-complete="off"></el-input>
          </el-form-item>
</el-row>
</el-col><el-col :span="4">
<el-upload
  class="avatar-uploader"
  action="https://jsonplaceholder.typicode.com/posts/"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>


<!-- 
<upload-img></upload-img> -->
<div style="width:200px;text-align:center">免冠照片</div>

</el-col>
</el-row>





                 <el-row>
          <el-form-item label="业务职责">
            <el-input 
            type="textarea"
            v-model="formData.memo" auto-complete="off"></el-input>
          </el-form-item>
          </el-row>

            <el-row>
          <el-form-item label="备注">
            <el-input 
            type="textarea"
            v-model="formData.memo" auto-complete="off"></el-input>
          </el-form-item>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="劳务合同信息">

          <el-row class="item-w270">

                 <el-form-item label="入职时间">
                    <el-input v-model="formData.gzlx" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="试用期">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                    <el-form-item label="转正时间">
                    <el-input v-model="formData.jbgz" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="离职时间">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>
</el-row>
                 <el-row class="item-w270">
                
                                    <el-form-item label="合同类型">
                    <el-input v-model="formData.jbgz" auto-complete="off"></el-input>
                </el-form-item>
                 <el-form-item label="合同开始时间">
                    <el-input v-model="formData.gzlx" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="合同时长">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="合同结束时间">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                                <el-form-item label="合同结束时间">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
</el-row>
<el-row class="item-w270">

                 <el-form-item label="工资类型">
                    <el-input v-model="formData.gzlx" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="基本工资">
                    <el-input v-model="formData.jbgz" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="职务工资">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>
                                <el-form-item label="计件工资">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>
                    <el-form-item label="计时工资">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>
                                <el-form-item label="介绍提成%">
                    <el-input v-model="formData.website" auto-complete="off"></el-input>
                </el-form-item>


</el-row>


        </el-tab-pane>
        <el-tab-pane label="档案/附件">

          <el-row class="item-w270">
                <el-form-item label="最高学历">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item>      
                <el-form-item label="所学专业">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 
            <el-form-item label="毕业院校">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 

            <el-form-item label="毕业院校">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 
          </el-row>

<el-row class="item-w270">
                      <el-form-item label="职业资格证1">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 
                      <el-form-item label="职业资格证2">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 
           <el-form-item label="职业资格证3">
            <el-input v-model="formData.zgxl" auto-complete="off"></el-input>
          </el-form-item> 

</el-row>

<el-row class="item-w270">
          <el-form-item label="身份证号">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
                    <el-form-item label="身份证地址">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
                              <el-form-item label="籍贯">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
                                        <el-form-item label="民族">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="婚姻">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>

                </el-row>

                
<el-row class="item-w270">

<el-form-item label="现居住地址">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item label="公司宿舍地址">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
           <el-form-item label="床位号">
            <el-input v-model="formData.sfz_id" auto-complete="off"></el-input>
          </el-form-item>
</el-row>

                <el-row class="item-w270">
                <el-form-item label="社保帐号">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="公积金">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>



                </el-row>

<el-row class="item-w270">

                <el-form-item label="紧急联系人">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                                <el-form-item label="联系人关系">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>



</el-row>

<el-row class="item-w270">

                <el-form-item label="视力">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="健康状况">
                    <el-input v-model="formData.trademark" auto-complete="off"></el-input>
                </el-form-item>




</el-row>

        </el-tab-pane>


            </el-tabs>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="resetForm" style="float:left;margin-left:20px;">查看款号详情</el-button> -->
        <el-button @click="resetForm">重置</el-button>
        <el-button @click="dialogClose">取 消</el-button>
        <el-button type="primary" @click="alertopen">确定</el-button>
      </div>
    </el-dialog>
    <!-- <dialog-search-order
      v-bind:dialogshow="dialogSearchOrder"
      @dialog_close="dialogSearchOrder = !dialogSearchOrder"
    ></dialog-search-order> -->
  </div>
</template>
<style scoped>

.el-tab-pane{
  padding:20px;
  height: 500px;
}


 .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 200px;
    height: 200px;
    line-height: 200px;
    text-align: center;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
</style>

<script>
module.exports = {
  methods: {
    dialogAdd() {
      console.log(123);
    },
    dialogClose() {
      this.$emit("dialog_close", 1);
    },
    clickfullscreen() {
      this.fullscreen = !this.fullscreen;
    },
    submitForm() {
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    resetForm() {
      this.$refs["elForm"].resetFields();
    },
    alertopen() {
      this.$confirm("是否继续操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "操作成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
     handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
  },
  props: ["dialogshow"],
  data() {
    return {
      imageUrl: '',
      formData: {
        name: null,
        tel:null,
        gonghao: null,
        kahao: null,
        six: null,
        zhiwu:null,
        is_zaizhi: null,
        is_disable:1,
        ruzhi_time: null,
        lizhi_time: null,
        tel: null,
        address: null,
        ganwei: null,
        ganweijb: null,
        bumen: null,
        bangzu: null,
      },

      field114Options: [
        {
          label: "电话",
          value: 1,
        },
        {
          label: "微信",
          value: 2,
        },
        {
          label: "邮件",
          value: 3,
        },
        {
          label: "QQ",
          value: 4,
        },
        {
          label: "短信",
          value: 5,
        },
        {
          label: "面谈",
          value: 6,
        },
      ],
      field116Options: [
        {
          label: "客户自填",
          value: "1",
        },
        {
          label: "回访客户",
          value: "2",
        },
        {
          label: "其它",
          value: "3",
        },
      ],
      dialogChangeGenji: false,
      fullscreen: false,
      Sendmssages: {
        address: "",
        customercate: "",
        cate: "",
        nickname: "",
        creditrank: "",
        name: "",
      },
    
      customer: {
        name: "",
        customercode: "",
        customerstatus: "",
        customercate: "",
        creditrank: "",
        creditline: "",
        capital: "",
        annualsales: "",
        bank: "",
        certificateno: "",
        address: "",
        area: "",
        brand: "",
        bankaccount: "",
        trademark: "",
        website: "",
        lperson: "",
        lphone: "",
        contacts: "",
        phone: "",
        phonenum: "",
        weixin: "",
        email: "",
        fax: "",
        resource: "",
        requirement: "",
        ordercountmonth: "",
        purchaseamountmonth: "",
        ordercountyear: "",
        purchaseamountyear: "",
        customerstaffname: "",
        customerstaffcode: "",
        operator: "",
        insertime: "",
        remark: "",
      },
    };
  },
  components: {
    "dialog-tools": "url:../tools/dialog-tools.vue",
    "dialog-search-order": "url:./search-order.vue",
    //"upload-img": "url:../tools/upload-img.vue",
    
  },
};
</script>
